<template>
    <div class="middle-box text-center loginscreen animated fadeInDown">
        <div class='margin-top-180px'>
            <h2>WeShare Login</h2>
            <!-- <form class="m-t"> -->
                <div class="form-group">
                    <input v-focus type="test" class="form-control" placeholder="请输入用户名" required="" v-model="username" v-on:keyup.enter="login">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" placeholder="请输入密码" required="" v-model="password" v-on:keyup.enter="login">
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b" v-on:click="login">Login</button>
            <!-- </form> -->
        </div>
    </div>
</template>

<script>

import config from '../../../../config/config.js'
import toastr from '../../../../static/js/toastr.min'
import cookieServer from '@/components/server/cookie.js'

var mixin = {
  created: function () {
    // console.log('混合对象的钩子被调用')
  }
}


export default {
    name: 'login',
    data () {
        return {
            username: '',
            password: ''
        }
    },
    mixins: [mixin],
    created () {
        // console.log('组件钩子被调用')
    },
    methods: {
        login () {
            // console.log(this.username);
            // console.log(this.password);
            // console.log(config.user);
            if (!this.username || !this.password) {
                toastr.error('请输入用户名和密码');
            } else {
                if (!config.user[this.username]) {
                    toastr.error('用户名不存在');
                } else if (config.user[this.username].password == this.password) {
                    // console.log("登陆成功");
                    // 存 cookie
                    cookieServer.setCookie(config.user[this.username].id)
                    // 跳转页面
                    if (this.username == 'zhang1' || this.username == 'admin_1') {
                        this.$router.push({ name: 'ADDataList', params: { username: config.user[this.username].id }})
                    } else {
                        this.$router.push({ name: 'ChannelList', params: { username: config.user[this.username].id }})
                    }
                    toastr.success('登陆成功');
                } else {
                    toastr.error('用户名或密码错误');
                }
            }
        }
    },
    directives: {
        focus: {
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        },
        demo: {
            bind: function (el, binding, vnode) {
              var s = JSON.stringify
              el.innerHTML =
                'name: '       + s(binding.name) + '<br>' +
                'value: '      + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: '   + s(binding.arg) + '<br>' +
                'modifiers: '  + s(binding.modifiers) + '<br>' +
                'vnode keys: ' + Object.keys(vnode).join(', ')
            }

        }
    }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.margin-top-180px {
		margin-top: 180px;
	}
</style>
